  <script setup>
  import SearchBar from "./SearchBar.vue";
  // 1.导入 use 大头的方法
  import { onMounted, ref } from "vue";
  // import { useCounterStore } from "./stores/counter";
  // import { storeToRefs } from "pinia";
  // // 2.执行方法得到store实例对象
  // const counterStore = useCounterStore();
  // console.log(counterStore);

  // // 直接解构赋值（响应式丢失）
  // // const { count, doulleCount } = counterStore

  // // 方法包裹 （保持响应式更新）
  // const { count, doulleCount } = storeToRefs(counterStore);

  // //  方法直接从原来的counterStore中解构赋值
  // const { increment } = counterStore;

  // // 触发action
  // onMounted(() => {
  //   counterStore.getList();
  // });

  //
  const searchDate = ref({
    keyword: "",
    placeholder: '请输入你要查询的关键字',
    Options: [
      { label: "视频", value: "video" },
      { label: "文章", value: "article" },
      { label: "用户", value: "user" },
    ],
    selectedValue: "video",
  });
  </script>

<template>
  <div>
    <SearchBar v-model="searchDate"></SearchBar>
    <!-- <button @click="increment">{{ count }}</button>
    {{ doulleCount }}
    <ul>
      <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
    </ul> -->
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
